
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
	<title>YUI Library Examples: Console: YUI configuration to filter log messages</title>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    	<link rel="stylesheet" type="text/css" href="../../assets/yui.css" >

<style>
    /*Supplemental CSS for the YUI distribution*/
    #custom-doc { width: 95%; min-width: 950px; }
    #pagetitle {background-image: url(../../assets/bg_hd.gif);}
/*    #pagetitle h1 {background-image: url(../../assets/title_h_bg.gif);}*/
</style>

<link rel="stylesheet" type="text/css" href="../../assets/dpSyntaxHighlighter.css">
<link type="text/css" rel="stylesheet" href="../../build/cssfonts/fonts-min.css" />
<script type="text/javascript" src="../../build/yui/yui-min.js"></script>
<style type="text/css">
#console {
    position: static;
    float: left;
}
#demo .yui-console .yui-console-title {
    border: 0 none;
    color: #000;
    font-size: 13px;
    font-weight: bold;
    margin: 0;
    text-transform: none;
}

#demo .yui-console .yui-console-entry-meta {
    margin: 0;
}

.filter-controls p label {
    display: block;
    margin: .25em 0;
}
#demo input {
    vertical-align: middle;
}

.form {
    clear: left;
    padding: 1em 0;
}

.form span {
    padding-left: 3em;
}

#msg {
    width: 50%;
}

.filter-controls {
    width: 180px;
    margin-left: 1em;
    float: left;
}

#preview {
    background: #eee;
    border: 1px solid #999;
    margin: 1em 0;
    overflow: auto;
    padding: 1em;
    width: 480px;
}
</style>

</head>
<body id="yahoo-com" class=" yui-skin-sam">
<div id="custom-doc" class="yui-t2">
<div id="hd">
	<div id="ygunav">
		<p>
            <em>
                <a href="http://developer.yahoo.com/yui/3/">YUI 3.x Home</a> <i> - </i>	
            </em>
		</p>
		<form action="http://search.yahoo.com/search" id="sitesearchform">
            <input name="vs" type="hidden" value="developer.yahoo.com">
            <input name="vs" type="hidden" value="yuiblog.com">
		    <div id="sitesearch">
		    	<label for="searchinput">Site Search (YDN &amp; YUIBlog): </label>
			    <input type="text" id="searchinput" name="p">
			    <input type="submit" value="Search" id="searchsubmit" class="ygbt">
		    </div>
		</form>
    </div>
	<div id="ygma"><a href="../../"><img src="../../assets/logo.gif"  border="0" width="200" height="93"></a></div>
	<div id="pagetitle"><h1>YUI Library Examples: Console: YUI configuration to filter log messages</h1></div>
</div>
<div id="bd">

	<div id="bar-note"><p><strong>Note:</strong> This is YUI 3.x. Looking for <a href="http://developer.yahoo.com/yui/">YUI 2.x</a>?</p></div>

	<div id="yui-main">
		<div class="yui-b">
		  <div class="yui-ge">
			  <div class="yui-u first example" id="main">

	<h2>Console: YUI configuration to filter log messages</h2>

	<div id="example" class="promo">
	<p>
	<p>This example illustrates how to configure your YUI instance to ignore certain log messages to aid in reducing the signal-to-noise ratio when debugging.</p>

<p>Log messages filtered out from the YUI config are permanently ignored.  If you want to be able to temporarily hide and reshow messages, use the <a href="../../console-filters.html">ConsoleFilters plugin</a>.  It is not uncommon to set up <code>logInclude</code> or <code>logExclude</code> in the YUI configuration and use the ConsoleFilters plugin.</p>

<p>Log messages can be ignored based on the source (e.g. <code>event</code> or <code>attribute</code>) or based on their log level (info, warn, error).</p>
	</p>	

	<div class="module example-container ">
			<div class="hd exampleHd">
			<p class="newWindowButton yui-skin-sam">
                <a href="console_yui_config_clean.html" target="_blank">View example in new window.</a>
            </p>
		</div>		<div id="example-canvas" class="bd">

		
	<!--BEGIN SOURCE CODE FOR EXAMPLE =============================== -->
	
	<div id="demo">
    <div id="console"></div>

    <div class="filter-controls">
        <h4>Source filter</h4>
        <p>
            <select id="incexc">
                <option value="logExclude" selected="selected">Exclude</option>
                <option value="logInclude">Include</option>
            </select>
            <label for="filter_a"><input type="checkbox" name="src_filter" value="sourceA" id="filter_a"> <code>sourceA = true</code></label>
            <label for="filter_b"><input type="checkbox" name="src_filter" value="sourceB" id="filter_b"> <code>sourceB = true</code></label>
            <label for="filter_c"><input type="checkbox" name="src_filter" value="sourceC" id="filter_c" checked="checked"> <code>sourceC = true</code></label>
        </p>
    </div>

    <div class="filter-controls">
        <h4>Log level</h4>
        <p>
            <label for="lvl_info">
                <input type="radio" name="log_level" id="lvl_info" value="info" checked="checked">
                <code>LOG_LEVEL_INFO</code>
            </label>
            <label for="lvl_warn">
                <input type="radio" name="log_level" id="lvl_warn" value="warn">
                <code>LOG_LEVEL_WARN</code>
            </label>
            <label for="lvl_error">
                <input type="radio" name="log_level" id="lvl_error" value="error">
                <code>LOG_LEVEL_ERROR</code>
            </label>
        </p>
    </div>

    <div class="form">
        <h4>Log a message</h4>
        <div>
            <input type="text" id="msg" value="This is a log message!">
            <button type="button" id="log">log message</button>

            <p>
                Source:
                <label for="msg_src_a">
                    <input type="radio" name="msg_src" id="msg_src_a" value="sourceA" checked="checked">
                    A
                </label>
                <label for="msg_src_b">
                    <input type="radio" name="msg_src" id="msg_src_b" value="sourceB">
                    B
                </label>
                <label for="msg_src_c">
                    <input type="radio" name="msg_src" id="msg_src_c" value="sourceC">
                    C
                </label>

                <span>Category:</span>
                <label for="msg_info">
                    <input type="radio" name="msg_cat" id="msg_info" value="info" checked="checked">
                    info
                </label>
                <label for="msg_warn">
                    <input type="radio" name="msg_cat" id="msg_warn" value="warn">
                    warn
                </label>
                <label for="msg_error">
                    <input type="radio" name="msg_cat" id="msg_error" value="error">
                    error
                </label>
            </p>
        </div>

        <h4>Code preview</h4>
        <pre id="preview">// YUI instance configuration
var Y = YUI({
    "logLevel": "info",
    "logExclude": {
        "sourceC": true
    }
});

// Log statement
Y.log(&quot;This is a log message!&quot;, &quot;info&quot;, &quot;sourceA&quot;);</pre>
    </div>
</div>
<script type="text/javascript">
YUI({base:"../../build/", timeout: 10000}).use("console", "selector-css3", "json-stringify", function (Y) {

// To eliminate duplicate reporting in native console in supporting browsers
Y.config.useBrowserConsole = false;

// Add the default filtering of sourceC messages
Y.config.logExclude = {
    sourceC : true
};

// Create and render the Console
var yconsole = new Y.Console({ boundingBox: '#console' }).render();


// Set up event listeners
// Log source checkboxes
Y.all('#demo input[name=src_filter]').on('click', function (e) {
    var disposition = Y.get('#incexc').get('value'),
        src = e.target;

    if (src.get('checked')) {
        Y.config[disposition] = Y.config[disposition] || {};
        Y.config[disposition][src.get('value')] = true;
    } else {
        delete Y.config[disposition][src.get('value')];
        if (!Y.Object.size(Y.config[disposition])) {
            delete Y.config[disposition];
        }
    }
    updatePreview();
});

// Source include or exclude select
Y.get('#incexc').on('change', function () {
    if (this.get('value') === 'logInclude') {
        Y.config.logInclude = Y.config.logExclude;
        delete Y.config.logExclude;
    } else {
        Y.config.logExclude = Y.config.logInclude;
        delete Y.config.logInclude;
    }
    updatePreview();
});

// Log level radio group
Y.all('#demo input[name=log_level]').on('click', function (e) {
    var lvl = e.target;

    if (lvl.get('checked')) {
        yconsole.set('logLevel', lvl.get('value'));
        updatePreview();
    }
});

// Log message input and radio groups
Y.get('#msg').on('keyup', updatePreview);
Y.all('#demo input[name=msg_src]').on('click', updatePreview);
Y.all('#demo input[name=msg_cat]').on('click',  updatePreview);

// Log message button
Y.get('#log').on('click', function (e) {
    var msg = Y.get('#msg').get('value'),
        cat = Y.get('#demo input[name=msg_cat]:checked').get('value'),
        src = Y.get('#demo input[name=msg_src]:checked').get('value');

    Y.log(msg,cat,src);
});

// Support function
function updatePreview() {
    var filters   = Y.all('#demo input[name=src_filter]:checked'),
        cfg = {
            logLevel: Y.get('#demo input[name=log_level]:checked').get('value')
        };

    if (filters.size()) {
        cfg[Y.get('#incexc').get('value')] = Y.Array.hash(filters.get('value'));
    }

    Y.get('#preview').set('text',Y.substitute(
        "// YUI instance configuration\n" +
        "var Y = YUI({cfg});\n\n" +
        "// Log statement\n" +
        'Y.log("{msg}", "{lvl}", "{src}");',
        {
            cfg: Y.JSON.stringify(cfg, null, 4),
            msg: Y.get('#msg').get('value'),
            lvl: Y.get('#demo input[name=msg_cat]:checked').get('value'),
            src: Y.get('#demo input[name=msg_src]:checked').get('value')
        }));
}

});
</script>
	
	<!--END SOURCE CODE FOR EXAMPLE =============================== -->
	
		
		</div>
	</div>			
	</div>
		
	<h3>Setting up filters in the YUI configuration</h3>
<p>The configuration object passed to the YUI constructor supports a few settings that can help manage Console output while debugging.  These configuration options are <code>logExclude</code>, <code>logInclude</code>, <code>logLevel</code>, <code>filter</code>, and <code>filters</code>.</p>

<p>This example will show the use of the <code>logInclude</code>, <code>logExclude</code>, and <code>logLevel</code> configurations.</p>

<p>An example configuration might look like this:</p>

<textarea name="code" class="JScript" cols="60" rows="1">
YUI({
    filter : 'debug', // request -debug versions of modules for log statements
    logExclude : {
        event : true,     // Don't broadcast log messages from the event module
        attribute : true, // or the attribute module
        widget : true     // or the widget module
    },
    logLevel : 'error',       // Show only errors in the Console
    useBrowserConsole : false // Don't use the browser's native console
}).use('overlay','anim','console', function (Y) {

/* Console instances will default to logLevel = Y.Console.LOG_LEVEL_ERROR */

});
</textarea>

<p><code>logExclude</code> and <code>logInclude</code> prevent the logging subsystem from broadcasting filtered log messages.  <code>logLevel</code>, on the other hand is used by Console instances to filter messages received from the subsystem.</p>

<p>Updating <code>Y.config.logExclude</code> or <code>Y.config.logInclude</code> at runtime will immediately change the subsystem filtering, but will not recover messages previously sent from that source.</p>

<textarea name="code" class="JScript" cols="60" rows="1">
YUI({
    logExclude : {
        event : true
    }
}).use('console', function (Y) {

/* In here, Y.config refers to the config object passed to the constructor */

// Stop broadcasting log messages from the attribute module
Y.config.logExclude.attribute = true;

// Start broadcasting log messages from the event module again
delete Y.config.logExclude.event;

});
</textarea>

<p>When a Console is instantiated, barring explicit <code>logLevel</code> attribute configuration, the <code>logLevel</code> will be adopted from the YUI instance's configured <code>logLevel</code>, or <code>Y.Console.LOG_LEVEL_INFO</code> as a fallback.  Unlike <code>logExclude</code>, changing the value in the YUI configuration will only affect instantiated Consoles from that point on.  Additionally, you can manually override the <code>logLevel</code> a Console instance will display by updating its <code>logLevel</code> attribute.</p>

<textarea name="code" class="JScript" cols="60" rows="1">
YUI({ logLevel : 'warn' }).use('console', function (Y) {

var yconsole_1 = new Y.Console(); // logLevel == Y.Console.LOG_LEVEL_WARN

var yconsole_2 = new Y.Console({
    logLevel : Y.Console.LOG_LEVEL_INFO // override at construction
});

// This will not affect yconsole_1 or yconsole_2
Y.config.logLevel = 'error';

var yconsole_3 = new Y.Console(); // logLevel == Y.Console.LOG_LEVEL_ERROR

yconsole_1.set('logLevel', Y.Console.LOG_LEVEL_INFO); // update this instance

});
</textarea>

<p>The interactive portion of this example illustrates the effect of various filter settings against logged messages.  In real application, it is most likely that the logging configuration won't be changed at runtime but set once in the YUI configuration at construction.</p>

<p>The most relevant portion of the <a href="#full_code_listing">code for the demo above</a> is the updating of the YUI config and Console attribute.</p>

<textarea name="code" class="JScript" cols="60" rows="1">
// Create and render the Console
var yconsole = new Y.Console({ boundingBox: '#console' }).render();

// Set up event listeners
// Log source checkboxes
Y.all('#demo input[name=src_filter]').on('click', function (e) {
    var disposition = Y.get('#incexc').get('value'),
        src = e.target;

    if (src.get('checked')) {
        Y.config[disposition] = Y.config[disposition] || {};
        Y.config[disposition][src.get('value')] = true;
    } else {
        delete Y.config[disposition][src.get('value')];
        if (!Y.Object.size(Y.config[disposition])) {
            delete Y.config[disposition];
        }
    }
    updatePreview();
});

// Source include or exclude select
Y.get('#incexc').on('change', function () {
    if (this.get('value') === 'logInclude') {
        Y.config.logInclude = Y.config.logExclude;
        delete Y.config.logExclude;
    } else {
        Y.config.logExclude = Y.config.logInclude;
        delete Y.config.logInclude;
    }
    updatePreview();
});

// Log level radio group
Y.all('#demo input[name=log_level]').on('click', function () {
    var lvl = e.target;

    if (lvl.get('checked')) {
        yconsole.set('logLevel', lvl.get('value'));
        updatePreview();
    }
});
</textarea>

<h3 id="full_code_listing">Full Code Listing</h3>

<h4>Markup</h4>

<textarea name="code" class="HTML" cols="60" rows="1">
<div id="demo">
    <div id="console"></div>

    <div class="filter-controls">
        <h4>Source filter</h4>
        <p>
            <select id="incexc">
                <option value="logExclude" selected="selected">Exclude</option>
                <option value="logInclude">Include</option>
            </select>
            <label for="filter_a"><input type="checkbox" name="src_filter" value="sourceA" id="filter_a"> <code>sourceA = true</code></label>
            <label for="filter_b"><input type="checkbox" name="src_filter" value="sourceB" id="filter_b"> <code>sourceB = true</code></label>
            <label for="filter_c"><input type="checkbox" name="src_filter" value="sourceC" id="filter_c" checked="checked"> <code>sourceC = true</code></label>
        </p>
    </div>

    <div class="filter-controls">
        <h4>Log level</h4>
        <p>
            <label for="lvl_info">
                <input type="radio" name="log_level" id="lvl_info" value="info" checked="checked">
                <code>LOG_LEVEL_INFO</code>
            </label>
            <label for="lvl_warn">
                <input type="radio" name="log_level" id="lvl_warn" value="warn">
                <code>LOG_LEVEL_WARN</code>
            </label>
            <label for="lvl_error">
                <input type="radio" name="log_level" id="lvl_error" value="error">
                <code>LOG_LEVEL_ERROR</code>
            </label>
        </p>
    </div>

    <div class="form">
        <h4>Log a message</h4>
        <div>
            <input type="text" id="msg" value="This is a log message!">
            <button type="button" id="log">log message</button>

            <p>
                Source:
                <label for="msg_src_a">
                    <input type="radio" name="msg_src" id="msg_src_a" value="sourceA" checked="checked">
                    A
                </label>
                <label for="msg_src_b">
                    <input type="radio" name="msg_src" id="msg_src_b" value="sourceB">
                    B
                </label>
                <label for="msg_src_c">
                    <input type="radio" name="msg_src" id="msg_src_c" value="sourceC">
                    C
                </label>

                <span>Category:</span>
                <label for="msg_info">
                    <input type="radio" name="msg_cat" id="msg_info" value="info" checked="checked">
                    info
                </label>
                <label for="msg_warn">
                    <input type="radio" name="msg_cat" id="msg_warn" value="warn">
                    warn
                </label>
                <label for="msg_error">
                    <input type="radio" name="msg_cat" id="msg_error" value="error">
                    error
                </label>
            </p>
        </div>

        <h4>Code preview</h4>
        <pre id="preview">// YUI instance configuration
var Y = YUI({
    "logLevel": "info",
    "logExclude": {
        "sourceC": true
    }
});

// Log statement
Y.log(&quot;This is a log message!&quot;, &quot;info&quot;, &quot;sourceA&quot;);</pre>
    </div>
</div>
</textarea>

<h4>JavaScript</h4>

<textarea name="code" class="JScript" cols="60" rows="1">
YUI({base:"../../build/", timeout: 10000}).use("console", "selector-css3", "json-stringify", function (Y) {

// To eliminate duplicate reporting in native console in supporting browsers
Y.config.useBrowserConsole = false;

// Add the default filtering of sourceC messages
Y.config.logExclude = {
    sourceC : true
};

// Create and render the Console
var yconsole = new Y.Console({ boundingBox: '#console' }).render();


// Set up event listeners
// Log source checkboxes
Y.all('#demo input[name=src_filter]').on('click', function (e) {
    var disposition = Y.get('#incexc').get('value'),
        arc = e.target;

    if (src.get('checked')) {
        Y.config[disposition] = Y.config[disposition] || {};
        Y.config[disposition][src.get('value')] = true;
    } else {
        delete Y.config[disposition][src.get('value')];
        if (!Y.Object.size(Y.config[disposition])) {
            delete Y.config[disposition];
        }
    }
    updatePreview();
});

// Source include or exclude select
Y.get('#incexc').on('change', function () {
    if (this.get('value') === 'logInclude') {
        Y.config.logInclude = Y.config.logExclude;
        delete Y.config.logExclude;
    } else {
        Y.config.logExclude = Y.config.logInclude;
        delete Y.config.logInclude;
    }
    updatePreview();
});

// Log level radio group
Y.all('#demo input[name=log_level]').on('click', function (e) {
    var lvl = e.target;

    if (lvl.get('checked')) {
        yconsole.set('logLevel', lvl.get('value'));
        updatePreview();
    }
});

// Log message input and radio groups
Y.get('#msg').on('keyup', updatePreview);
Y.all('#demo input[name=msg_src]').on('click', updatePreview);
Y.all('#demo input[name=msg_cat]').on('click',  updatePreview);

// Log message button
Y.get('#log').on('click', function (e) {
    var msg = Y.get('#msg').get('value'),
        cat = Y.get('#demo input[name=msg_cat]:checked').get('value'),
        src = Y.get('#demo input[name=msg_src]:checked').get('value');

    Y.log(msg,cat,src);
});

// Support function
function updatePreview() {
    var filters   = Y.all('#demo input[name=src_filter]:checked'),
        cfg = {
            logLevel: Y.get('#demo input[name=log_level]:checked').get('value')
        };

    if (filters.size()) {
        cfg[Y.get('#incexc').get('value')] = Y.Array.hash(filters.get('value'));
    }

    Y.get('#preview').set('text',Y.substitute(
        "// YUI instance configuration\n" +
        "var Y = YUI({cfg});\n\n" +
        "// Log statement\n" +
        'Y.log("{msg}", "{lvl}", "{src}");',
        {
            cfg: Y.JSON.stringify(cfg, null, 4),
            msg: Y.get('#msg').get('value'),
            lvl: Y.get('#demo input[name=msg_cat]:checked').get('value'),
            src: Y.get('#demo input[name=msg_src]:checked').get('value')
        }));
}

});
</textarea>

<h4>CSS</h4>

<textarea name="code" class="CSS" cols="60" rows="1">
#console {
    position: static;
    float: left;
}
#demo .yui-console .yui-console-title {
    border: 0 none;
    color: #000;
    font-size: 13px;
    font-weight: bold;
    margin: 0;
    text-transform: none;
}

#demo .yui-console .yui-console-entry-meta {
    margin: 0;
}

.filter-controls p label {
    display: block;
    margin: .25em 0;
}
#demo input {
    vertical-align: middle;
}

.form {
    clear: left;
    padding: 1em 0;
}

.form span {
    padding-left: 3em;
}

#msg {
    width: 50%;
}

.filter-controls {
    width: 180px;
    margin-left: 1em;
    float: left;
}

#preview {
    background: #eee;
    border: 1px solid #999;
    margin: 1em 0;
    overflow: auto;
    padding: 1em;
    width: 480px;
}
</textarea>
				</div>
				<div class="yui-u sidebar">
					
				
					<div id="examples" class="mod box4">
                        <div class="hd">
						<h4>
    Console Examples:</h4>
                        </div>
						<div class="bd">
							<ul>
								<li><a href='../console/console_basic.html'>Creating a Console for debugging</a></li><li class='selected'><a href='../console/console_yui_config.html'>YUI configuration to filter log messages</a></li><li><a href='../console/console_filter.html'>Using the ConsoleFilters plugin</a></li><li><a href='../console/console_global.html'>Creating a universal Console</a></li>							</ul>
						</div>
					</div>
					
					<div class="mod box4">
                        <div class="hd">
						<h4>More Console Resources:</h4>
                        </div>
                        <div class="bd">
						<ul>
							<!-- <li><a href="http://developer.yahoo.com/yui/console/">User's Guide</a> (external)</li> -->
						<li><a href="../../api/module_console.html">API Documentation</a></li>
</ul>
                        </div>
					</div>
			  </div>
		</div>
		
		</div>
	</div>


<div class="yui-b toc3" id="tocWrapper">
<!-- TABLE OF CONTENTS -->
<div id="toc">
	
<ul>
<li class="sect first">YUI 3.x Project</li><li class="item"><a title="The Yahoo! User Interface (YUI) Library, 3.x Branch, " href="http://developer.yahoo.com/yui/3/">YUI 3 Web Site (external)</a></li><li class="item"><a title="Examples of every YUI utility and control in action" href="../../examples/">YUI 3 Examples</a></li><li class="item"><a title="Instantly searchable API documentation for the entire YUI library." href="../../api/">YUI 3 API Docs</a></li><li class="item"><a title="The YUI Library can be downloaded from SourceForge" href="http://sourceforge.net/projects/yui/">YUI 3 on Sourceforge (external)</a></li><li class="item"><a title="YUI is free and open, offered under a BSD license." href="http://developer.yahoo.com/yui/3/license.html">YUI License (external)</a></li><li class="sect">YUI 3 Core - Examples</li><li class="item"><a title="YUI (Global Prerequisite) - Functional Examples" href="../../examples/yui/index.html">YUI (Global Prerequisite)</a></li><li class="item"><a title="Event - Functional Examples" href="../../examples/event/index.html">Event</a></li><li class="item"><a title="Node - Functional Examples" href="../../examples/node/index.html">Node</a></li><li class="sect">YUI 3 Component Infrastructure - Examples</li><li class="item"><a title="Attribute - Functional Examples" href="../../examples/attribute/index.html">Attribute</a></li><li class="item"><a title="Plugin - Functional Examples" href="../../examples/plugin/index.html">Plugin</a></li><li class="item"><a title="Widget - Functional Examples" href="../../examples/widget/index.html">Widget</a></li><li class="sect">YUI 3 Utilities - Examples</li><li class="item"><a title="Animation - Functional Examples" href="../../examples/anim/index.html">Animation</a></li><li class="item"><a title="Cache - Functional Examples" href="../../examples/cache/index.html">Cache</a></li><li class="item"><a title="Cookie - Functional Examples" href="../../examples/cookie/index.html">Cookie</a></li><li class="item"><a title="DataSchema - Functional Examples" href="../../examples/dataschema/index.html">DataSchema</a></li><li class="item"><a title="DataSource - Functional Examples" href="../../examples/datasource/index.html">DataSource</a></li><li class="item"><a title="DataType - Functional Examples" href="../../examples/datatype/index.html">DataType</a></li><li class="item"><a title="Drag &amp; Drop - Functional Examples" href="../../examples/dd/index.html">Drag &amp; Drop</a></li><li class="item"><a title="Get - Functional Examples" href="../../examples/get/index.html">Get</a></li><li class="item"><a title="History - Functional Examples" href="../../examples/history/index.html">History</a></li><li class="item"><a title="ImageLoader - Functional Examples" href="../../examples/imageloader/index.html">ImageLoader</a></li><li class="item"><a title="IO - Functional Examples" href="../../examples/io/index.html">IO</a></li><li class="item"><a title="JSON (JavaScript Object Notation) - Functional Examples" href="../../examples/json/index.html">JSON</a></li><li class="item"><a title="Queue - Functional Examples" href="../../examples/queue/index.html">Queue</a></li><li class="item"><a title="Stylesheet - Functional Examples" href="../../examples/stylesheet/index.html">Stylesheet</a></li><li class="sect">YUI 3 Widgets - Examples</li><li class="item"><a title="Overlay - Functional Examples" href="../../examples/overlay/index.html">Overlay</a></li><li class="item"><a title="Slider - Functional Examples" href="../../examples/slider/index.html">Slider</a></li><li class="sect">YUI 3 Node Plugins - Examples</li><li class="item"><a title="FocusManager Node Plugin - Functional Examples" href="../../examples/node-focusmanager/index.html">FocusManager Node Plugin</a></li><li class="item"><a title="MenuNav Node Plugin - Functional Examples" href="../../examples/node-menunav/index.html">MenuNav Node Plugin</a></li><li class="sect">YUI 3 CSS - Examples</li><li class="item"><a title="YUI CSS Reset - Functional Examples" href="../../examples/cssreset/index.html">CSS Reset</a></li><li class="item"><a title="YUI Fonts - Functional Examples" href="../../examples/cssfonts/index.html">CSS Fonts</a></li><li class="item"><a title="YUI Base - Functional Examples" href="../../examples/cssbase/index.html">CSS Base</a></li><li class="sect">YUI 3 Developer Tools - Examples</li><li class="selected "><a title="Console - Functional Examples" href="../../examples/console/index.html">Console</a></li><li class="item"><a title="Profiler - Functional Examples" href="../../examples/profiler/index.html">Profiler</a></li><li class="item"><a title="Test - Functional Examples" href="../../examples/test/index.html">Test</a></li><li class="sect">The YUI Community</li><li class="item"><a title="The Yahoo! User Interface Blog" href="http://yuiblog.com">YUI Blog (external)</a></li><li class="item"><a title="The Yahoo! Group YDN-JavaScript hosts the YUI community forum" href="http://tech.groups.yahoo.com/group/ydn-javascript/">YUI Forum (external)</a></li><li class="item"><a title="The Yahoo! Group yui3 is dedicated to the 3.x branch of the Yahoo! User Interface (YUI) Library." href="http://tech.groups.yahoo.com/group/yui3/">YUI 3 Forum (external)</a></li><li class="item"><a title="YUI is used by Yahoo! and by hundreds of other sites, including many you know and love." href="/yui/poweredby/">YUI Sightings (external)</a></li><li class="item"><a title="Videos and podcasts from the YUI Team and from the Yahoo! frontend engineering community." href="http://developer.yahoo.com/yui/theater/">YUI Theater (external)</a></li><li class="sect">YUI Articles on the YUI Website</li><li class="item"><a title="Answers to Frequently Asked Questions about the YUI Library" href="http://developer.yahoo.com/yui/articles/faq/">YUI FAQ (external)</a></li><li class="item"><a title="Yahoo!'s philosophy of Graded Browser Support" href="http://developer.yahoo.com/yui/articles/gbs/">Graded Browser Support (external)</a></li><li class="item"><a title="Reporting Bugs and Making Feature Requests for YUI Components" href="http://developer.yahoo.com/yui/articles/reportingbugs/">Bug Reports/Feature Requests (external)</a></li><li class="item"><a title="Serve YUI source files from Yahoo! -- free, fast, and simple" href="http://developer.yahoo.com/yui/3/articles/hosting/">Serving YUI Files from Yahoo! (external)</a></li></ul>
</div>
</div>
	</div><!--closes bd-->

	<div id="ft">
        <p class="first">Copyright &copy; 2009 Yahoo! Inc. All rights reserved.</p>
        <p><a href="http://privacy.yahoo.com/privacy/us/devel/index.html">Privacy Policy</a> - 
            <a href="http://docs.yahoo.com/info/terms/">Terms of Service</a> - 
            <a href="http://docs.yahoo.com/info/copyright/copyright.html">Copyright Policy</a> - 
            <a href="http://careers.yahoo.com/">Job Openings</a></p>
	</div>
</div>
<script src="../../assets/dpSyntaxHighlighter.js"></script>
<script language="javascript"> 
dp.SyntaxHighlighter.HighlightAll('code'); 
</script>
</body>
</html>
